import React, {Component} from "react";
import {View, TouchableOpacity, Alert, StyleSheet, TextInput, Dimensions, Modal, Text, Image} from "react-native";

const {width, height} = Dimensions.get('window');

export default class MineOrderTuiKuanDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            name:this.props.name,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
        this.setState({name: nextProps.name});
    }

    closeModal() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    confirm(){
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.callbackName(this.state.name)
    }
    cancel(){
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.callbackName(this.props.name)
    }

    renderDialog() {
        return (
         <View style={styles.white_background}>
            <Text style={{fontSize:14,fontWeight:'bold',color:'black',marginTop:25}}>所在学校</Text>
             <TextInput underlineColorAndroid='transparent' onChangeText={(text)=>this.setState({name:text})} style={{borderColor:'#DEDEDE',borderWidth:1,borderRadius:15,height:30,width:291,marginTop:15,padding:0}}
                        textAlign='center' placeholderTextColor='rgba(0,0,0,0.3)' placeholder='杰睿学校' value={this.state.name}/>
             <View style={{backgroundColor:'white',flexDirection:'row',marginTop:15}}>
                 <TouchableOpacity onPress={()=>{this.cancel()}} style={{borderRadius:15,borderWidth:1,borderColor:'#DEDEDE',backgroundColor:"white",width:136,height:30,borderRadius:15,justifyContent:'center',alignItems:'center',marginLeft:20,flexDirection:'row'}}>
                     <Text style={{color:'rgba(0,0,0,0.3)',fontSize:13,}}>取消</Text>
                 </TouchableOpacity>
                 <View style={{flex:1}}/>
                 <TouchableOpacity onPress={()=>{this.confirm()}} style={{backgroundColor:"#DB3843",width:136,height:30,borderRadius:15,justifyContent:'center',alignItems:'center',marginRight:20,flexDirection:'row'}}>
                     <Text style={{color:'white',fontSize:13,}}>确定</Text>
                 </TouchableOpacity>
             </View>
         </View>
        )
    }

    render() {

        return (
            <View style={{flex: 1}}>
                <Modal
                    transparent={true}
                    visible={this.state.isVisible}
                    animationType={'fade'}
                    onRequestClose={() => {}}>
                    <View style={styles.container}>
                        {this.renderDialog()}
                    </View>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent:'center',
        alignItems:'center',
    },

    white_background:{
        width:351,
        height:285,
        backgroundColor:'white',
        borderRadius:4,
        alignItems:'center',
    },
});